var couleur_pixou = false;
var accessoire_pixou = false;
var etape_login = 1;


$(document).ready(function(){
    
    $('#info_login_user').css('display','none');
    load_login();
    load_jquery_properties();
});

function load_login(){
    if($('#overlay_login').length){
        $('#overlay_login').delay(500).fadeIn(400,function(){
            // On regarde s'il y a déjà des utilisateurs
            var pixou_cookies = unserialize(getCookie("pixou_cookies"));
            //alert(pixou_cookies);
            // Si personne n'a encore utilisé l'application
            var infos_cookies;
            if(pixou_cookies==false){
                infos_cookies = { nb_users : 0 };
            }
            else{
                infos_cookies = { nb_users : 3 };
            }
//            var pixou_user;
//            document.cookie = "nb_users_pixou=" + serialize('1') + "pixou_user=" + serialize(pixou_user);
            
            // Nouvelle requête Ajax pour charger la zone de navigation
            $.ajax({
                // url vers la méthode de chargement du nouvel environnement
                url: '../login/index',
                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                type: 'POST',
                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                async : false,
                data: infos_cookies,
                // Données à transmettre et mises en forme précédemment
                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                        // Insertion de la vue du nouvel environnement chargée par le controleur
                        $('#connection').html(msg);
                        $('#connection').fadeIn(1000);
                        
                        load_jquery_properties();
                    }
                });
        });

    }
    else{
        alert('no overlay login');
    }

}

function load_jquery_properties(){

    $('.couleurs').mouseover(function(event){
        var color_id = (event.target.id);
        if(!($('#'+color_id).hasClass('selected'))){
            $('#'+color_id).animate({
                top: "+=10px"
            });
        }
    });

    $('.couleurs').mouseout(function(event){
        var color_id = (event.target.id);
        if(!($('#'+color_id).hasClass('selected'))){
            $('#'+color_id).animate({
                top: "-=10px"
            });
        }
    });

    $('.couleurs').click(function(event){
        var color_id = (event.target.id);
        couleur_pixou = $('#'+color_id).attr('id');
        if(!($('#'+color_id).hasClass('selected'))){
            $('.selected').animate({
                top: "-=10px"
            });
        }
        $('.couleurs').removeClass('selected');
        $('#'+color_id).addClass('selected');
        $('#new_user_log_1').attr("src","../../assets/images/login/log1/pixou_"+couleur_pixou+".png")
        $('#btn_next').css('display','block');
    });

    $('.items').mouseover(function(event){
        var item_id = (event.target.id);
        if(!($('#'+item_id).hasClass('selected'))){
            $('#'+item_id).animate({
                top: "+=10px"
            });
        }
    });

    $('.items').mouseout(function(event){
        var item_id = (event.target.id);
        if(!($('#'+item_id).hasClass('selected'))){
            $('#'+item_id).animate({
                top: "-=10px"
            });
        }
    });

    $('.items').click(function(event){
        var item_id = (event.target.id);
        accessoire_pixou = $('#'+item_id).attr('id');
        if(!($('#'+item_id).hasClass('selected'))){
            $('.selected').animate({
                top: "-=10px"
            });
        }
        $('.items').removeClass('selected');
        $('#'+item_id).addClass('selected');
        $('#img_item_selected_login_2').css("background-image","url('../../assets/images/login/log2/"+accessoire_pixou+".jpg')")
        $('#btn_next').css('display','block');
    });

    $('#btn_next').click(function(){
        if(couleur_pixou!=false){
            //alert('next screen with '+couleur_pixou+ 'and accessoire '+accessoire_pixou);
            $('#login_content').fadeOut(500, function(){
                etape_login++;

                var data_login = {
                couleur_pixou : couleur_pixou,
                accessoire_pixou : accessoire_pixou,
                etape_login : etape_login
                };

                if(etape_login<=2){

                // Nouvelle requête Ajax pour charger la zone de navigation
                $.ajax({
                    // url vers la méthode de chargement du nouvel environnement
                    url: '../login/loadLoginStep',
                    // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                    type: 'POST',
                    // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                    async : false,
                    data: data_login,
                    // Données à transmettre et mises en forme précédemment
                    success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                            // Insertion de la vue du nouvel environnement chargée par le controleur
                            $('#connection').html(msg);
                            $('#connection').fadeIn(1000);

                            load_jquery_properties();
                        }
                    });
                }
                else{
                    // Nouvelle requête Ajax pour charger la zone de navigation
                $.ajax({
                    // url vers la méthode de chargement du nouvel environnement
                    url: '../login/saveUser',
                    // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                    type: 'POST',
                    // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                    async : false,
                    dataType    : 'json',
                    data: data_login,
                    // Données à transmettre et mises en forme précédemment
                    success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                            // Insertion de la vue du nouvel environnement chargée par le controleur
                            $('#info_login_user').html(msg.login_html);

                            $('#overlay_login').fadeOut(400);
                            $('#connection').fadeOut(400);

                            // Pour le cookie
//                            alert(msg.user_id);
//                            alert(msg.log1);
//                            alert(msg.log2);
                            
                            $('#info_login_user').delay(500).fadeIn(500);

                            load_jquery_properties();
                        }
                    });
                }
            });
        }
        
    });
    
    
    $('#btn_previous').click(function(){
        if(couleur_pixou!=false){

            $('#login_content').fadeOut(500, function(){
                etape_login--;
                accessoire_pixou = false;
                couleur_pixou = false;

                var data_login = {
                couleur_pixou : 'couleur_0',
                accessoire_pixou : accessoire_pixou,
                etape_login : etape_login
                };

                // Nouvelle requête Ajax pour charger la zone de navigation
                $.ajax({
                    // url vers la méthode de chargement du nouvel environnement
                    url: '../login/loadLoginStep',
                    // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                    type: 'POST',
                    // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                    async : false,
                    data: data_login,
                    // Données à transmettre et mises en forme précédemment
                    success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                            // Insertion de la vue du nouvel environnement chargée par le controleur
                            $('#connection').html(msg);
                            $('#connection').fadeIn(1000);

                            load_jquery_properties();
                        }
                    });
            });
        }
        
    });
    
    //<img id="log_2" height="200" width="236" src="<?php echo(img_login_url('log1/pixou_couleur_0.png'));?>">

//    function choixAccessoire(){
//        //alert('features screen');
//        $('#login_content').fadeIn(1000);
//        alert(couleur_pixou);
//        
//    }
}

function getCookie(name) {

        var pos = document.cookie.indexOf(name + "=");
        if (pos == -1) {
            return null;
        } else {
            var pos2 = document.cookie.indexOf(";", pos);
            if (pos2 == -1) {
            return unescape(
                document.cookie.substring(pos + name.length + 1));
            } else {
            return unescape(
                document.cookie.substring(pos + name.length + 1, pos2));
            }
        }
    }

    function serialize(data) {

        var namevalue = "";

        for (var el in data) {
                namevalue += "&" + escape(el) + "=" + escape(data[el]);
                //alert('tour ' + el + ' : ' + namevalue);
        }
        return namevalue.substring(1);
    }

    function unserialize(data) {

        var object = new Array();

        if(data!=null){
            var pairs = data.split(/&/g);

            for (var i=0; i<pairs.length; i++) {
                    if (pairs[i].indexOf("=") > -1) {
                            object[unescape(pairs[i].substring(0, pairs[i].indexOf("=")))] = 
                            unescape(pairs[i].substring(pairs[i].indexOf("=") + 1));
                    }
            }
            return object;
        }
        else{
            return false;
        }
    }


    


